import React from 'react';
import ReactDOM from 'react-dom';

interface Props {

}

interface State {
  number: number;
  name: string;
  x?: string;
}

class Clock extends React.Component<Props, State> {
  state = {number: 0, name: '计数器'};

  handleClick = (event: React.MouseEvent) => {
    //这里的状态可以不是完整的状态，它会自动被合并到总的状态树上
    //新老属性都有则覆盖
    //新的有老的没有则追加
    //老的有新的没有则保持原来的状态
    this.setState({number: this.state.number + 1});
  };

  render() {
    return (
      <div>
        <p>{this.state.number}</p>
        <button onClick={this.handleClick}>+</button>
      </div>
    );
  }
}

ReactDOM.render(<Clock/>, document.getElementById('root'));
